<template>
    <div class="add-equipment">
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>单位名称</label>
            </div>
            <div>
                <p>{{detailData.ParentName}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>项目名称</label>
            </div>
            <div>
                <p>{{detailData.ProjectName}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>设备类型</label>
            </div>
            <div>
                <p>{{detailData.EquipmentTypeName}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>自编号</label>
            </div>
            <div>
                <p>{{detailData.EquipmentNo}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>设备型号</label>
            </div>
            <div>
                <p>{{detailData.EquipmentModeNo}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>设备编号</label>
            </div>
            <div>
                <p>{{detailData.EquipmentRecordNo}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>安装位置</label>
            </div>
            <div>
                <p>{{detailData.SetupLocation}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>是否自有设备</label>
            </div>
            <div>
                <p>{{detailData.IsSelfEquipment}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>进场日期</label>
            </div>
            <div>
                <p>{{detailData.EntryDate}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>安装日期</label>
            </div>
            <div>
                <p>{{detailData.SetupDate}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>检查日期</label>
            </div>
            <div>
                <p>{{detailData.CheckDate}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>计划拆除日期</label>
            </div>
            <div>
                <p>{{detailData.DismantleDate}}</p>
            </div>
        </div>
        <div class="form-item form-item-style2">
            <div class="label-title">
                <label>检查人员</label>
            </div>
            <div>
                <p class="textarea">{{detailData.CheckName}}</p>
            </div>
        </div>
        <div class="cut-off-rule"></div>
        <div class="form-section">
            <h3 data-v-d3024438="">拆除方案</h3>
            <div class="form-item form-item-style1">
                <div class="label-title label-title1">
                    <label>是否报批</label>
                </div>
                <div class="select-section">
                    <div :class='{"active":detailData.DismantlingScheme == 1}'>
                        已报批
                    </div>
                    <div :class='{"active":detailData.DismantlingScheme == 0}'>
                        未报批
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-for="(item,index) in detailData.DismantlingSchemeFiles"
                 :key="index"
                 @click="preview(item.FilePath)">
                <div class="label-title label-title1">
                    <label>附件</label>
                </div>
                <div class="right-section">
                    <span>预览</span>
                    <x-icon type="ios-arrow-right"
                            size="20"
                            class="icon-right"></x-icon>
                </div>
            </div>
        </div>
        <div class="cut-off-rule"></div>
        <div class="form-section">
            <h3>操作人员信息</h3>
            <ul class="list1">
                <li v-for="(item,index) in detailData.OperationList"
                    :key="index">
                    <router-link :to="{path:'/operatingPersonnel',query:{
                        userDetail:JSON.stringify(item)
                    }}">
                        <div>
                            <p>姓名：{{item.UserName}}</p>
                            <p>证件有效期：{{item.PaperValidateTo}}</p>
                        </div>
                        <div class="right-section">
                            <span>{{item.JobName}}</span>
                            <x-icon type="ios-arrow-right"
                                    size="20"
                                    class="icon-right"></x-icon>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="cut-off-rule"></div>
        <div class="form-section">
            <h3>
                拆除单位名称
            </h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>拆除单位名称</label>
                </div>
                <div>
                    <p>{{detailData.DismantlingUnitName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>营业执照</label>
                </div>
                <div class="select-section">
                    <div :class='{"active":detailData.BusinessLicense == "1"}'>
                        齐全
                    </div>
                    <div :class='{"active":detailData.BusinessLicense != "1"}'>
                        不齐全
                    </div>
                </div>
            </div>
            <!-- <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>营业执照</label>
                    </div>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailData.BusinessLicenseFiles&&detailData.BusinessLicenseFiles.length>0"
                            :imgList="detailData.BusinessLicenseFiles"></upload>
                    <strong v-else
                            class="no-img">暂无图片</strong>
                </div>
            </div> -->
            <div class="form-item form-item-style1"
                 v-for="(item,index) in detailData.BusinessLicenseFiles"
                 @click="preview(item)"
                 :key="index">
                <div class="label-title label-title1">
                    <label>附件</label>
                </div>
                <div class="right-section">
                    <span>预览</span>
                    <x-icon type="ios-arrow-right"
                            size="20"
                            class="icon-right"></x-icon>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>资质证书</label>
                </div>
                <div class="select-section">
                    <div :class='{"active":detailData.Certificate == "1"}'>
                        齐全
                    </div>
                    <div :class='{"active":detailData.Certificate != "1"}'>
                        不齐全
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-for="(item,index) in detailData.CertificateFiles"
                 @click="preview(item)"
                 :key="index">
                <div class="label-title label-title1">
                    <label>附件</label>
                </div>
                <div class="right-section">
                    <span>预览</span>
                    <x-icon type="ios-arrow-right"
                            size="20"
                            class="icon-right"></x-icon>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>安全生产许可证书</label>
                </div>
                <div class="select-section">
                    <div :class='{"active":detailData.InstallationPermit == "1"}'>
                        齐全
                    </div>
                    <div :class='{"active":detailData.InstallationPermit == "0"}'>
                        不齐全
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-for="(item,index) in detailData.InstallationPermitFiles"
                 @click="preview(item)"
                 :key="index">
                <div class="label-title label-title1">
                    <label>附件</label>
                </div>
                <div class="right-section">
                    <span>预览</span>
                    <x-icon type="ios-arrow-right"
                            size="20"
                            class="icon-right"></x-icon>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>检查记录</label>
                </div>
                <div>
                    <p class="textarea">{{detailData.CheckRecord}}</p>
                </div>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'equipmentClearBefore',
    data () {
        return {
            startTime: '',
            endTime: '',
            YSFormData: '',
            YSuploadLength: '',
            userInfo: '',
            detailData: {},
            regImg: /\.(png|jpg|PNG|JPG|jpeg|JPEG|gif|GIF)$/
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.getDetail()
    },
    methods: {
        preview (filePath) {
            if (this.regImg.test(filePath)) {
                this.$router.push({
                    path: '/previewImg',
                    query: {
                        previewImg: filePath
                    }
                })
            } else {
                wx.miniProgram.navigateTo({
                    url: `/pages/openDocument/index?filePath=${filePath}`
                })
            }
        },
        getDetail () {
            this.$vux.loading.show({
                text: '加载中...'
            })
            let params = {
                'allowPaging': true,
                'business': 'getDismantlingCheckDetails',
                'data': {
                    id: this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.detailData = res.data.data
                }
            }).catch(() => {

            }).finally(() => {
                this.$vux.loading.hide()
            })
        }
    }
}
</script>
<style lang="less" scoped>
.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 10px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.add-equipment .label-title1 {
    width: 168px;
    line-height: 18px;
}
.form-section {
    ul {
        padding-left: 20px;
        li {
            border-bottom: 1px solid #efeff4;
        }
    }
    .list1 {
        li {
            a {
                display: flex;
                justify-content: space-between;
                padding: 10px 0;
                p {
                    line-height: 18px;
                    font-size: 14px;
                    color: #666;
                }
                .right-section {
                    padding-right: 20px;
                }
            }
            &:last-child {
                border-bottom: none;
            }
        }
    }
    .list2 {
        li {
            padding-right: 20px;
            a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 55px;
            }
            p {
                color: #666;
                font-size: 14px;
            }
        }
    }
}
.right-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
        font-size: 14px;
        color: #666;
    }
}
.icon-right {
    fill: #999;
}
</style>
